import React, { Component } from 'react';
import {Step} from 'iftide';
import {View,Text,StyleSheet} from 'react-native'

const stepIndicatorStyles = {
    stepIndicatorSize: 20,
    currentStepIndicatorSize:20,
    separatorStrokeWidth: 198,
    currentStepStrokeWidth: 4,
    stepStrokeCurrentColor: '#FF7B7B',
    separatorFinishedColor: '#FF7B7B',
    separatorUnFinishedColor: '#aaaaaa',
    stepIndicatorFinishedColor: '#FF7B7B',
    stepIndicatorUnFinishedColor: '#aaaaaa',
    stepIndicatorCurrentColor: '#FF7B7B',
    stepStrokeFinishedColor:'#FF7B7B',
    stepStrokeUnFinishedColor:'#aaaaaa',
    stepIndicatorLabelFontSize: 15,
    currentStepIndicatorLabelFontSize: 15,
    stepIndicatorLabelCurrentColor: '#FFFFFF',
    stepIndicatorLabelFinishedColor: '#FFFFFF',
    stepIndicatorLabelUnFinishedColor: '#FFFFFF',
    labelColor: '#666666',
    errorStepColor: '#F9F900', 
    labelSize: 12,
    currentStepLabelColor: '#FF7B7B'
};
export default class Basic extends Component{
    constructor(props) {
        super(props);
        this.state = {
            currentPage:5
        }
    }

    render() {
        const labels = [{
            majorLabel: '提交申请',
            minorLabel: '2017-03-01',
            leftTime:'2021-10-21 13:00:08'
        },{
            majorLabel: '预审批通过',
            minorLabel: '2017-03-04',
            leftTime:'2021-10-21 13:00:08'
        },{
            majorLabel: '贷款受理',
            minorLabel: '2017-03-07',
            leftTime:'2021-10-21 13:00:08'
        },{
            majorLabel: '贷款调查审批中',
            minorLabel: '2017-03-10',
            leftTime:'2021-10-21 13:00:08'
        },{
            majorLabel: '审批通过',
            minorLabel: '2017-03-15',
            leftTime:'2021-10-21 13:00:08'
        },{
            majorLabel: '抵押',
            minorLabel: '四大满贯死哦的感觉搜哦哦我加ttt',
            leftTime:'2021-10-21 13:00:08'
        },{
            majorLabel: '放款',
            minorLabel: 'abcdefghijklmnopq',
            leftTime:'2021-10-21 13:00:08'
        }];

        return (
            <View style={styles.container}>
                <Step
                    // customStyles={stepIndicatorStyles}
                    stepCount={7}
                    direction='vertical'
                    currentPosition={this.state.currentPage}
                    labels={labels}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 500,
    }
});